<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <style>

        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            padding: 100px;
            background: #f1f1f1;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .button {
            background-color: #4cafa0; /* Green */
            border: 1px solid #006d80;
            color: white;
            padding: 10px 3px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            float: right;
            position:relative;
            left:200px;
        }

        .button:hover {
            background-color: #5d3e8e;
        }

        .style {
            float: left;
        }

        .column {
            font-family: Arial;
            font-size: 30px;
            text-shadow: 2px 2px 5px red;
            float: left;
            width:100%;

        }

        .solid {
            background-color: white;
            width: 300px;
        }

        .solid a {
            background-color: yellow;
            text-shadow: 2px 2px 5px blue;
            border: 4px solid gold;
            border-radius: 8px;
        }

        img {
            float: left;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
        }

        input[type=text] {
            width: 50%;
            padding: 100px 50px;
            box-sizing: border-box;
            border: 1px solid #555;
            outline: none;
        }

        input[type=text]:focus {
            background-color: lightblue;
        }

        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 12px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="clearfix">
    <div class="img">
        <img alt="头像" src="../static/img/Users-logo.png"/>
    </div>
    <div class="style">
        <div class="column">
            <a>id个人名称</a>
            <button class="button">编辑个人信息</button>
        </div>
        </br></br></br>
        <div class="solid">
            <a>主要爱好</a>:
            <a>玄幻</a>
            <a>言情</a>
            <a>白话文</a>
            <a>历史</a>
        </div>
        <p>所在地区：四川省 - 成都市</p>
        <p>社交网络：qq</p>
    </div>
</div>
    <div>
        <p>收藏书籍</p>
    </div>
    <div>
        <p>收藏书籍</p>
    </div>
<div>
    <form>
        <label for="fname">留言</label>
        <input type="text" id="fname" name="fname" value="留言..">
        <input type="submit" value="发送">
    </form>
</div>
</body>
</html>